<template>
	<div class="divisional">
		<!-- 查询 -->
		<div class="search_box" style="width: 95%;">
			<el-row :gutter="20">
				<el-form :inline="true" :model="searchForm" ref="searchFormRef">
					<el-col :span="6">
						<el-form-item label="批次号" prop='batchNumber'>
							<el-input v-model="searchForm.batchNumber" size="small" placeholder="批次号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="信用卡号" prop="cardNumber">
							<el-input v-model="searchForm.cardNumber" size="small" placeholder="信用卡号"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="客户姓名" prop="name">
							<el-input v-model="searchForm.name" size="small" placeholder="客户姓名"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="证件号码" prop="identificationNumber">
							<el-input v-model="searchForm.identificationNumber" size="small" placeholder="证件号码"></el-input>
						</el-form-item>
					</el-col>

					<!-- <el-col :span="6">
            <el-form-item label="额度" prop="derateQuota">
              <el-input v-model="searchForm.derateQuota" size="small" placeholder="贷款合同号"></el-input>
            </el-form-item>
          </el-col> -->

					<el-col :span="6">
						<el-form-item label="　所属银行" prop="cardType">
							<el-select v-model="searchForm.cardType" placeholder="请选择所属卡种" size="small">
								<el-option label="通联" value="1"></el-option>
								<el-option label="银数" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<!--   <el-col :span="6">
            <el-form-item label="所属卡种" prop="bank">
              <el-select v-model="searchForm.bank" placeholder="请选择所属卡种" size="small">
                <el-option label="通联" value="1"></el-option>
                <el-option label="银数" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->



					<!-- <el-col :span="6">
            <el-form-item label="　手机号" prop="phoneNumber">
              <el-input v-model="searchForm.phoneNumber" size="small" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col> -->

					<!-- ============== -->



					<el-col :span="6">
						<el-form-item label="减免本金" prop="serviceCharge">
							<el-input v-model="searchForm.serviceCharge" size="small" placeholder="手续费"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="6">
						<el-form-item label="减免利息" prop="accrual">
							<el-input v-model="searchForm.accrual" size="small" placeholder="利息"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="减免违约金" prop="penalSum">
							<el-input v-model="searchForm.penalSum" size="small" placeholder="违约金"></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="6">
						<el-form-item label="审批状态" prop="caseStatue">
							<el-select v-model="searchForm.caseStatue" placeholder="请选择审批状态" size="small">
								<el-option label="未审批" value="0"></el-option>
								<el-option label="已审批" value="1"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="7" id="rqfw">
						<span for>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开户日期</span>
						<el-date-picker v-model="dateVal" type="daterange" size="small" width="30%" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
						 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 60%;"></el-date-picker>
					</el-col>


					<!-- <el-col :span="88">
            <el-form-item label="开户日期" prop="startTime">
              <el-input v-model="searchForm.startTime" size="small" type="date" placeholder="开户日期开始时间"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="88">
            <el-form-item label="开户日期" prop="endTime">
              <el-input v-model="searchForm.endTime" size="small" type="date" placeholder="开户日期结束时间"></el-input>
            </el-form-item>
          </el-col> -->


					<div align="right" style="padding-right: 36px;">
						<el-button type="primary" size="small" @click="onSubmitSearch" icon="el-icon-search">查询</el-button>
						<el-button type="primary" size="small" @click="restSearch()" icon="el-icon-delete">重置</el-button>
						<el-button type="primary" size="small" @click="onSubmitInsert" icon="el-icon-edit">申请</el-button>
						<el-button v-if="this.total>0" type="primary" round size="small" @click="exportData">导出<i class="el-icon-upload el-icon--right"></i></el-button>

					</div>
				</el-form>
			</el-row>
		</div>


		<!-- 列表展示页面 -->
		<!--   <el-table :header-cell-style="{background:'LightYellow	',color:'black'}" :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"> -->



		<el-table element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" :data="tableData"
		 :header-cell-style="{background:'LightYellow	',color:'black'}" max-height="400" style="width: 100%">


			<!--  <el-table-column label="序号" prop="id">
      </el-table-column> -->
			<el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>

			<el-table-column label="批次号" prop="batchNumber">
			</el-table-column>

			<el-table-column label="证件号码" :formatter="hidInfo" prop="identificationNumber">
			</el-table-column>
			<el-table-column label="客户姓名" prop="name">
			</el-table-column>

			<el-table-column label="信用卡号" prop="cardNumber" :formatter="hidInfo">
			</el-table-column>

			<!-- <el-table-column label="所属卡种" prop="bank">
        <template slot-scope="scope">
          <p v-if="scope.row.bank=='1'">通联</p>
          <p v-if="scope.row.bank=='2'">银数</p>
        </template>
      </el-table-column> -->

			<!--  <el-table-column label="开户日期" prop="openTime" width="150px">
      </el-table-column> -->


			<!-- <el-table-column label="手机号" prop="phoneNumber">
      </el-table-column> -->




			<!-- <el-table-column label="信用卡额度" prop="caseValue">
      </el-table-column> -->

			<!--  <el-table-column label="减免额度" prop="caseValue">
      </el-table-column> -->


			<!--  <el-table-column label="利息" prop="interest">
      </el-table-column> -->

			<!--    <el-table-column prop="accountStatus" label="信用卡状态">
        <template slot-scope="scope">
          <p v-if="scope.row.accountStatus=='0'">暂停使用</p>
          <p v-if="scope.row.accountStatus=='1'">正常</p>
        </template>
      </el-table-column> -->
			<el-table-column label="减免本金" prop="serviceCharge">
			</el-table-column>
			<el-table-column label="减免利息" prop="accrual">
			</el-table-column>
			<el-table-column label="减免违约金" prop="penalSum">
			</el-table-column>


			<el-table-column prop="caseStatue" label="审批状态" width="150px">
				<template slot-scope="scope">
					<p v-if="scope.row.caseStatue=='0'">未审批</p>
					<p v-if="scope.row.caseStatue=='1'">已审批</p>
				</template>
			</el-table-column>

			<el-table-column label="　　　　操作　　" width="180%" center>
				<template slot-scope="scope">
					<el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="text" v-if="$requestBtnApi.test.delBtn">删除</el-button>
					<el-button size="small" @click="handleDetails(scope.row)" type="text">详情</el-button>
					<el-button size="small" @click="Audit(scope.$index, scope.row)" type="text" v-if="$requestBtnApi.test.ShenpiBtn">审批</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="pageBox">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[5,10, 15,20]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager ,  next, slot, jumper">
			</el-pagination>
		</div>


		<!-- <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15,20]" :page-size="pageSize" :total="total" prev-text="上一页" next-text="下一页" layout="total, sizes, prev, next, slot, jumper">
      </el-pagination>
    </div>
 -->


		<!-- 申请  -----------录入-->
		<el-dialog title="申请页面" :visible.sync="InsertDialog">

			<el-form :model="Insertform" :rules="rules" ref="InsertFormRef" label-width="100px" class="demo-ruleForm">

				<el-divider content-position="left">基本信息</el-divider>

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="批次号" prop="batchNumber">
							<el-input v-model="Insertform.batchNumber" placeholder="批次号" :disabled="bdisable"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="客户姓名" prop="name">
							<el-input v-model="Insertform.name" placeholder="客户姓名" :disabled="ndisable"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="证件号码" prop="identificationNumber">
							<el-input v-model="Insertform.identificationNumber" placeholder="证件号码" :disabled="idisable"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="信用卡号" prop="cardNumber">
							<el-input v-model="Insertform.cardNumber" placeholder="信用卡号" :disabled="cdisable"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<center>
					<el-button @click="searchDetails()" type="primary" round size="small">查询详情</el-button>
				</center>

				<el-row :gutter="20" v-if="addflag==true">
					<el-divider content-position="left">卡片信息</el-divider>

					<el-col :span="12">
						<el-form-item label="所属卡种" prop="cardType">
							<el-select v-model="Insertform.cardType" placeholder="所属卡种" :disabled="true" size="small">
								<el-option label="通联" value="1"></el-option>
								<el-option label="银数" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="信用卡额度" prop="creditLimit">
							<el-input v-model="Insertform.creditLimit" placeholder="信用卡额度" :disabled="true"></el-input>
						</el-form-item>
					</el-col>



					<el-col :span="12">
						<el-form-item label="账单日" prop="billDay">
							<el-input v-model="Insertform.billDay" placeholder="账单日" :disabled="true"></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="12">
						<el-form-item label="当前账单额" prop="billAmount">
							<el-input v-model="Insertform.billAmount" placeholder="当前账单金额" :disabled="true"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="开户日期" prop="openTime">
							<el-input v-model="Insertform.openTime" placeholder="开户日期" :disabled="true"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="逾期期数" prop="numberOfOverduePeriods">
							<el-input v-model="Insertform.numberOfOverduePeriods" placeholder="逾期期数" :disabled="true"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="逾期欠款" prop="overdueArrears">
							<el-input v-model="Insertform.overdueArrears" placeholder="逾期欠款" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="透支本金" prop="benjin">
							<el-input v-model="Insertform.benjin" placeholder="透支本金" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="利息" prop="lixi">
							<el-input v-model="Insertform.lixi" placeholder="利息" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="违约金" prop="weiyueijn">
							<el-input v-model="Insertform.weiyuejin" placeholder="违约金" :disabled="true"></el-input>
						</el-form-item>
					</el-col>

				</el-row>

				<el-divider content-position="left" v-if="addflag==true">财务信息</el-divider>
				<el-row :gutter="20" v-if="addflag==true">
					<el-col :span="12">
						<el-form-item label="减免本金" prop="serviceCharge">
							<el-input v-model="Insertform.serviceCharge" placeholder="手续费"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<!-- 123-->
						<el-form-item label="减免利息" prop="accrual">
							<el-input v-model="Insertform.accrual" placeholder="减免利息"></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="12">
						<el-form-item label="减免违约金" prop="penalSum">
							<el-input v-model="Insertform.penalSum" placeholder="内容"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<center v-if="addflag==true">
					<el-button type="primary" @click="onSubmitGotoInsert('InsertFormRef')">点击申请</el-button>
					<el-button @click="InsertDialog = false">取消申请</el-button>
					<el-button @click="rest()">重置页面</el-button>
				</center>

				</el-row>
			</el-form>
		</el-dialog>



		<!--  详情页-->
		<el-dialog title="详情页面" :visible.sync="DetailsDialog">
			<div class="mainInfoBox">
				<div class="infoBox" v-for="(item,index) in infoList" :key="index">
					<label for>{{item.text}}:</label>
					<el-input v-model="item.value" size="small" disabled placeholder="请输入内容"></el-input>
				</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import {
		cmcUrl
	} from '../../../../static/baseUrl';
	const ExportJsonExcel = require('js-export-excel')
	import {
		Message
	} from "element-ui";
	export default {
		data() {
			return {
				detailInfo: [],
				infoList: [{
						field: "batchNumber",
						text: "批次号",
						value: "",
					},
					{
						field: "name",
						text: "姓名",
						value: "",
					},
					{
						field: "identificationNumber",
						text: "证件号码",
						value: "",
					},
					{
						field: "cardNumber",
						text: "信用卡号",
						value: "",
					},
					{
						field: "accrual",
						text: "减免利息",
						value: "",
					},
					{
						field: "cardType",
						text: "卡种",
						value: "",
					},
					{
						field: "creditLimit",
						text: "信用卡额度",
						value: "",
					},
					{
						field: "billDay",
						text: "账单日",
						value: "",
					},
					{
						field: "billAmount",
						text: "账单额",
						value: "",
					},
					{
						field: "openTime",
						text: "开户日期",
						value: "",
					},
					{
						field: "numberOfOverduePeriods",
						text: "逾期期数",
						value: "",
					},
					{
						field: "overdueArrears",
						text: "逾期欠款",
						value: "",
					},
					{
						field: "benjin",
						text: "本金",
						value: "",
					},
					{
						field: "lixi",
						text: "利息",
						value: "",
					},
					{
						field: "weiyuejin",
						text: "违约金",
						value: "",
					},
					{
						field: "serviceCharge",
						text: "减免本金",
						value: "",
					},
					{
						field: "accrual",
						text: "减免利息",
						value: "",
					},
					{
						field: "penalSum",
						text: "减免违约金",
						value: "",
					},
				],

				addflag: "",
				dateVal: "",
				currentPage: 1,
				total: 0,
				pageSize: 5,
				Detailsform: {},
				InsertDialog: false,
				DetailsDialog: false,
				searchForm: {
					batchNumber: "",
					cardNumber: "",
					name: "",
					identificationNumber: "",
					cardType: "",
					serviceCharge: "",
					accrual: "",
					penalSum: "",
					caseStatue: ""
				},
				bdisable: false,
				ndisable: false,
				idisable: false,
				cdisable: false,
				Insertform: {
					batchNumber: "",
					name: "",
					identificationNumber: "",
					cardNumber: "",
					cardType: "",
					creditLimit: "",
					billDay: "",
					billAmount: "",
					openTime: "",
					numberOfOverduePeriods: "",
					overdueArrears: "",
					benjin: "",
					lixi: "",
					weiyueijn: "",
					serviceCharge: "",
					accrual: "",
					penalSum: "",
				},
				rules: {

					accrual: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],

					penalSum: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					Lixi: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					serviceCharge: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					batchNumber: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					name: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					identificationNumber: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],
					cardNumber: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur'
					}, ],

				},
				search: '',
				tableData: [],
				batchNumber: "",
				name: "",
				identificationNumber: "",
				cardNumber: "",
				maps: [],

				excelTitle: ['批次号', '姓名', '证件号码', '信用卡号', '减免本金', '减免利息', '减免违约金', '是否审批 0未审批 1审批', '1通联2 银树', '信用卡额度', '账单日',
					'账单额', '开户日期', '逾期期数', '逾期欠款', '本金', '利息', '违约金'
				], //导出excel的表头，与excelColumn，需一一对应
				excelColumn: ['batchNumber', 'name', 'identificationNumber', 'cardNumber', 'serviceCharge', 'accrual',
					'penalSum', 'caseStatue', 'cardType', 'creditLimit', 'billDay', 'billAmount', 'openTime',
					'numberOfOverduePeriods', 'overdueArrears', 'benjin', 'lixi', 'weiyuejin'
				], //导出excel每列对应的数据



			}
		},
		methods: {
			indexMethod(index) {
				index = (index + 1) + (this.currentPage - 1) * this.pageSize;
				return index
			},
			//导出数据
			exportData() {
				let msg = "导出当前减免数据?";
				//let removeid = data.id;
				this.$confirm(msg, "提示", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success'
				}).then(() => {
					this.exportExcel();

				}).catch((err) => {
					console.log("err", err)
				});
			},
			exportExcel() {
				//开户时间范围
				let startTime = this.dateVal === null ? null : this.dateVal[0];
				let endTime = this.dateVal === null ? null : this.dateVal[1];
				this.$axios({
						method: "get",
						url: `/CMC/derate/list`,
						params: {
							pageNum: 1,
							pageSize: this.total,
							batchNumber: this.searchForm.batchNumber,
							cardNumber: this.searchForm.cardNumber,
							name: this.searchForm.name,
							identificationNumber: this.searchForm.identificationNumber,
							cardType: this.searchForm.cardType,
							serviceCharge: this.searchForm.serviceCharge,
							accrual: this.searchForm.accrual,
							penalSum: this.searchForm.penalSum,
							caseStatue: this.searchForm.caseStatue,

							/* 时间段参数*/
							startTime: startTime,
							endTime: endTime,
						}
					})
					.then((res) => {
						console.log(res, "导出数据");
						if (res.code == 200) {
							let totalData = res.data.list;

							let option = {};

							/* 获取日期 */
							var date1 = new Date();
							var year = date1.getFullYear();
							var month = date1.getMonth() + 1;
							var day = date1.getDate();

							/* fileName */
							option.fileName = year + "年" + month + "月" + day + "日" + "减免人数据"


							option.datas = [{
								sheetData: totalData,
								sheetName: '申请减免人的数据',
								sheetFilter: this.excelColumn,
								sheetHeader: this.excelTitle,
								columnWidths: [10, 10, 20, 10] //对应的列宽，置为屏宽的百分比，40%
							}, ];
							var toExcel = new ExportJsonExcel(option);
							toExcel.saveExcel();

						} else {
							console.error(res.message);
						}
					})
					.catch((err) => {
						console.log(err)
					});
			},

			/* 查看 减免 详情*/
			handleDetails(data) {
				this.DetailsDialog = true;
				this.$axios({
						method: "get",
						url: `/CMC/derate/selectDetails`,
						params: {
							id: data.id,
						}
					})
					.then((res) => {
						if (res.code == 200) {
							let dada = res.data;
							console.log("DADADADA", dada);
							console.log(id, "IDIDIDID");
						} else {
							Message.warning(res.message);
						}
					})
					.catch((err) => {});
				//组织详情展示
				Object.keys(this.infoList).forEach((item) => {
					let fiedMap = this.infoList[item];
					let key = fiedMap.field;
					this.$set(fiedMap, "value", data[key]);
				})
			},

			/* 根据 用户 信息，查询额度 神马的*/
			searchDetails() {
				this.$axios({
						method: "get",
						url: `/CMC/derate/searchDetails`,
						/*   data: options, */
						params: {
							batchNumber: this.Insertform.batchNumber,
							name: this.Insertform.name,
							identificationNumber: this.Insertform.identificationNumber,
							cardNumber: this.Insertform.cardNumber,
						}
					})
					.then((res) => {
						if (res.code == 200) {
							let arr = [];
							arr = res.data.map;
							console.log("arr 数组 结果如下：：", arr);
							if (arr.length > 0) {
								/* 账单日*/
								this.Insertform.billDay = arr[0].bill_day;
								/* 额度*/
								this.Insertform.creditLimit = arr[0].credit_limit;
								/* 开入户日期*/
								this.Insertform.openTime = arr[0].account_opening_date;
								/* 当前账单额*/
								this.Insertform.billAmount = arr[0].current_bill_amount;
								/* 卡种*/
								this.Insertform.cardType = arr[0].card_type;
								/* 逾期期数*/
								this.Insertform.numberOfOverduePeriods = arr[0].number_of_overdue_periods;
								/* 透支本金 */
								this.Insertform.benjin = arr[0].overdraft_principal;
								/* 违约金*/
								this.Insertform.weiyuejin = arr[0].liquidated_damages;
								/* 利息*/
								this.Insertform.lixi = arr[0].interest;
								/* 逾期欠款*/
								this.Insertform.overdueArrears = arr[0].overdue_arrears;
								/* 查询出来数据了，打开财务信息 */
								this.addflag = true;
								/* 基本信息输入完毕  查询出来财务信息，基本信息，，不可以在修改*/
								this.bdisable = true;
								this.ndisable = true;
								this.cdisable = true;
								this.idisable = true;

							} else {
								this.$message({
									message: '您输入的基本信息，不存在财务信息！',
									type: 'warning'
								});
								this.addflag = false;
							}
						} else {
							Message.warning(res.message);
						}
					})
					.catch((err) => {});
			},
			/* 分页*/
			handleCurrentChange(data) {
				this.currentPage = data;
				this.initData();
			},
			/* 分页*/
			handleSizeChange(data) {
				console.log(data, "handleSizeChange");
				this.pageSize = data;
				this.initData();
			},
			/* 去审批*/
			Audit(index, row) {
				if (row.caseStatue == '1') {
					this.$message({
						type: 'success',
						message: '您已经审批过了!'
					});

				} else {
					this.$confirm('请查看用户减免详情在审批哦, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$axios({
								method: "post",
								url: `/CMC/derate/audit`,
								data: "",
								params: {
									id: row.id,
								},
							})
							.then((res) => {
								if (res.code == 200) {
									this.$message({
										type: 'success',
										message: '审批成功!'
									});
								}
								this.initData();
							});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消审批'
						});
					});
				}

			},
			/* 定向 搜索 */
			onSubmitSearch() {
				this.currentPage = 1;
				this.initData();
			},
			/* 删除*/
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios({
							method: "post",
							url: `/CMC/derate/delete`,
							data: "",
							params: {
								id: row.id
							},
						})
						.then((res) => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!'
								});
							}
							this.initData();
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/* 重置  审批dialog*/
			restAudit() {
				this.$refs.AuditFormRef.resetFields();
			},

			/* 初始化首页*/
			initData() {
				//开户时间范围
				let startTime = this.dateVal === null ? null : this.dateVal[0];
				let endTime = this.dateVal === null ? null : this.dateVal[1];
				this.$axios({
						method: "get",
						url: `/CMC/derate/list`,
						params: {
							/* 条件查询 参数*/
							batchNumber: this.searchForm.batchNumber,
							cardNumber: this.searchForm.cardNumber,
							name: this.searchForm.name,
							identificationNumber: this.searchForm.identificationNumber,
							cardType: this.searchForm.cardType,
							serviceCharge: this.searchForm.serviceCharge,
							accrual: this.searchForm.accrual,
							penalSum: this.searchForm.penalSum,
							caseStatue: this.searchForm.caseStatue,

							/* 时间段参数*/
							startTime: startTime,
							endTime: endTime,
							/* 分页参数*/
							pageNum: this.currentPage,
							pageSize: this.pageSize,
						}
					})
					.then((res) => {
						if (res.code == 200) {
							this.tableData = res.data.list;
							console.log("TABLEDATA", this.tableData);
							this.total = Number(res.data.total);
							console.log("total", this.total);
						} else {
							Message.warning(res.message);
						}
					})
					.catch((err) => {});
			},
			/* 重置 搜索 */
			restSearch() {
				this.$refs.searchFormRef.resetFields();
				this.dateVal = "";
				this.initData();
			},
			/* 重置 录入 */
			rest() {
				/* this[formName] = {}; */
				this.$refs.InsertFormRef.resetFields();
				/* this.$refs[formName].resetFields(); */
			},
			/* 点击添加 按钮 打开添加对话框 */
			onSubmitInsert() {
				/* 打开 对话框*/
				this.InsertDialog = true;
				/* 设置  详情 为false 状态*/
				this.addflag = false;
				/* 重置  Input框文字*/
				this.rest();
				/* 打开 申请弹框 ----把框框 设置为 可填写状态*/
				this.bdisable = false;
				this.ndisable = false;
				this.cdisable = false;
				this.idisable = false;

			},
			/* 点击 申请 走 接口*/
			onSubmitGotoInsert(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios({
								method: "post",
								url: `/CMC/derate/add`,
								data: this.Insertform,
							})
							.then((res) => {
								if (res.code == 200) {
									this.InsertDialog = false;
									this.initData();
								} else {
									Message.warning(res.message);
								}
							})
							.catch((err) => {});

					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
		},
		created() {
			console.log("MENULIST", this.$route.meta.menuList)
			this.$route.meta.menuList.map((item) => {
				console.log(item, "ITEM");
				if (item.eleName == "查询") {
					this.$requestBtnApi.test.queryUrl = item.eleUrl;
					this.$requestBtnApi.test.queryType =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.test.queryBtn = true;
				} else if (item.eleName == "新增") {
					this.$requestBtnApi.test.addUrl = item.eleUrl;
					this.$requestBtnApi.test.addType =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.test.addBtn = true;
				} else if (item.eleName == "编辑") {
					this.$requestBtnApi.test.DetailsUrl = item.eleUrl;
					this.$requestBtnApi.test.DetailsType =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.test.DetailsBtn = true;
				} else if (item.eleName == "删除") {
					this.$requestBtnApi.test.delUrl = item.eleUrl;
					this.$requestBtnApi.test.delType =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.test.delBtn = true;

				} else if (item.eleName == "审批") {
					this.$requestBtnApi.test.ShenpiUrl = item.eleUrl;
					this.$requestBtnApi.test.ShenpiType =
						item.operType == "delete" ? "dele" : item.operType;
					this.$requestBtnApi.test.ShenpiBtn = true;
				}
			});
			this.initData();
		},
	};
</script>
<style lang="scss" scoped>
	.divisional {
		/deep/ .el-row:nth-child(1) {
			width: 100%;
			height: 1px;
			// background: pink;
			padding: 0;
			margin: 0;

			.el-col {
				padding: 0;
				height: inherit;
				/* border: 1px solid slategrey; */
				box-sizing: border-box;
				overflow: hidden;

				.el-form-item__content {
					line-height: 32px;
				}


				div:nth-child(1) {
					width: 100%;
					height: inherit;
					//   background: yellowgreen;
					display: flex;
					flex-wrap: wrap;
					// justify-content: flex-start;
					justify-content: space-around;
					box-sizing: border-box;
					/* padding-left: 30px;
           padding-top: 40px; */
					overflow-y: auto;

					.v_box {
						width: 20%;
						height: 8vh;
						margin-left: 15px;
						margin-right: 40px;
						// margin-bottom: 10px;
						// background: chocolate;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						padding: 0;
						border: none;

						div {
							padding: 0;
						}

						&:nth-child(7) {

							.el-date-editor--daterange.el-input,
							.el-date-editor--daterange.el-input__inner,
							.el-date-editor--timerange.el-input,
							.el-date-editor--timerange.el-input__inner {
								width: 100%;
							}
						}

						&:last-child {
							display: flex;
							flex-direction: row;
							justify-content: center;
							align-items: center;

							.el-button {
								width: 70px;
								height: 30px;

								&:first-child {
									margin-right: 10px;
								}
							}
						}
					}
				}
			}
		}

		/deep/ .el-row:nth-child(2) {
			width: 100%;
			/* height: 60vh; */
			// background: pink;
			padding: 0;
			margin: 0;
			margin-top: 10px;

			table {
				tbody {
					tr {
						td {
							.cell {
								box-sizing: border-box;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								word-break: normal !important;
								line-height: inherit;
								//   padding-right: 10px;
							}
						}
					}
				}
			}
		}

		.pageBox {
			display: flex;
			width: 100%;
			justify-content: left;
			margin-top: 10px;
		}


		/deep/ .el-dialog {
			.mainInfoBox {
				width: 100%;
				max-height: 60vh;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				overflow-y: auto;

				.infoBox {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 40px;
					width: 30%;

					label {
						width: 100px;
					}

					.el-input {
						flex: 1 1 auto;
					}
				}
			}
		}
	}


	.search_box {
		background: #fff;
		border-radius: 10px;
		padding: 40px 40px 175px 40px;
		margin: 0 0 20px 0;
	}

	.box_center {
		text-align: left;
	}

	.searchBtn {
		margin-left: 80px;
	}

	.search_box .inpText {
		width: 75px;
		justify-content: space-between;
		text-align: right;
		display: inline-block;
	}

	#rqfw .el-range-editor.el-input__inner {
		padding: 2px 2px;
	}
</style>
